<template>
  <div class="supervise-manage">
    <div class="title"></div>
    <div class="data"></div>

    <div class="select-box">
      <n-select v-model:value="selectValue" :options="selectData" class="!w-[128px] mr-[8px]" />
      <n-select v-model:value="selectValue1" :options="selectData1" class="!w-[128px]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';

const selectValue = ref('1');
const selectData = [
  {
    label: '2024年',
    value: '1',
  },
  {
    label: '2023年',
    value: '2',
  },
  {
    label: '2022年',
    value: '3',
  },
];
const selectValue1 = ref('1');
const selectData1 = [
  {
    label: '全部检查样式',
    value: '1',
  },
  {
    label: '部分检查样式',
    value: '2',
  },
];


defineComponent({ name: 'SuperviseManage' });
</script>

<style scoped lang="scss">
.supervise-manage {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .data {
    @apply w-full h-[368px] mx-auto mt-[10px];
    background: url('./assets/data-bg.png') no-repeat center;
  }

  .select-box {
    @apply absolute top-[4px] right-0 flex;
  }
}
</style>
